<template>
	<view class="inner pt30">
        <view class="flex">
            <view class="books-pic">
                <image class="pic" mode="widthFix" :src="infoData.cover"></image>
            </view>
            <view class="ml30">
                <view class="blod f36">{{ infoData.title }}</view>
                <view v-if="infoData.author" class="mt10 f26 gray">{{ infoData.author }}</view>
                <view v-if="infoData.copyright"><view class="site">来源：{{ infoData.copyright }}</view></view>
                <view>
                    <view class="cgty mr10" v-if="infoData.majorCate">{{ infoData.majorCate }}</view>
                    <view class="cgty" v-if="infoData.minorCate">{{ infoData.minorCate }}</view>
                </view>
                <view><view class="cgty" :class="{'mr10':index!=infoData.tags.length-1}" v-for="(item,index) in infoData.tags" :key="index">{{ item }}</view></view>
                <view>
                    <view class="start mr20" @click="toList">开始阅读</view>
                    <view class="start go mr20">继续阅读</view>
                    <view class="start add">收藏</view>
                </view>
            </view>
        </view>
        <view class="flex flex-between border--top pt30 mt30">
            <view class="">
                <view class="f34 blod">{{ infoData.totalFollower }}</view>
                <view class="f26 gray">收藏</view>
            </view>
            <view class="">
                <view class="f34 blod">{{ infoData.retentionRatio }}</view>
                <view class="f26 gray">评分</view>
            </view>
            <view class="">
                <view class="f34 blod">{{ infoData.wordCount }}</view>
                <view class="f26 gray">字数</view>
            </view>
        </view>
        <view class="mt30 pb30 pt40 border--top">
            <view class="f34 blod">书籍简介</view>
            <view class="mt20">{{infoData.longIntro}}</view>
        </view>

        <view class="mt30 pb30 pt40 border--top">
            <view class="flex flex-between"  @click="toList">
                <view>
                    <text class="f34 blod">目录</text>
                    <text class="f24 gray ml10">{{ infoData.lastChapter }}</text>
                </view>
                <view>
				    <uni-icons type="arrowright" size="16" class="ml10" color="#aaa"></uni-icons>
                </view>
            </view>
            <view class="mt20"></view>
        </view>

        <view class="pb30 pt40 border--top">
            <view class="flex flex-between">
                <view class="f34 blod">评论</view>
                <view class="f26 ">写评论</view>
            </view>
            <view class="mt20 f26 gray">暂无评论</view>
            <!-- <view class="mt20 f26 gray" v-for="(item,index) in infoData.tags" :key="index">评论{{index+1}}</view> -->
        </view>

	</view>
</template>

<script>
	import swiperPage from '@/components/mo-swiper-list/swiper-page.vue'
	import { mapActions, mapState } from 'vuex'
    import { staticURL, getBookInfo } from '@/api'
	import Mixin from '@/mixin'
	export default {
  		mixins:[Mixin],
		components: {
			swiperPage
		},
		data() {
			return {
                bookid: '',
                infoData: {},
			}
		},
		computed:{
		},
		onLoad(option){
            const item = JSON.parse(decodeURIComponent(option.item));
            this.bookid = item._id
            console.log(27,this.infoData)
            this.getInfo()
		},
		onShow(){
			
		},
		methods: {
            async getInfo(){
                const params = { bookid: this.bookid }
                const res = await getBookInfo(params)
                res.cover = staticURL + res.cover
                // #ifdef MP-WEIXIN
                res.cover =  'https:' + res.cover
                // #endif
                this.infoData = res
                console.log(res)
            },
            toDetail(){
                this.router({
                    url:'/pagesub/books/book?id='+ this.bookid
                })
            },
            toList(){
                this.router({
                    url:'/pagesub/books/list?id='+ this.bookid
                })
            },
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
	.books-pic{
		width: 180rpx;
		.pic{
			width: 100%;
			border-radius: 10rpx;
		}
	}
    .site{
        display: inline-block;
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        margin-top: 30rpx;
        color: #d6966a;
        background-color: #ffe7d7;
        border-radius: 50rpx 50rpx;
    }
    .cgty{
        display: inline-block;
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        margin-top: 30rpx;
        color: #999;
        background-color: #f5f5f5;
        border-radius: 50rpx 50rpx;
    }
    .start{
        display: inline-block;
        font-size: 28rpx;
        padding: 10rpx 30rpx;
        margin-top: 30rpx;
        background-color: #f5f5f5;
        border-radius: 50rpx 50rpx;
        &.go{
            color: #fff;
            background-color: $theme-color;
        }
        &.add{
            border: 1px solid $theme-color;
            color: $theme-color;
            background-color: transparent;
        }
    }
	
</style>
